import "./index.scss";
import { useRef, useEffect, useState } from "react";
import {
  EllipsisOutlined,
  SettingOutlined,
  DeleteOutlined,
  YoutubeOutlined
} from "@ant-design/icons";
import { Avatar, Card, Col, Row } from "antd";
import CountUp from "react-countup";

const { Meta } = Card;

const Main = () => {
  useEffect(() => {}, []);

  useEffect(() => {}, []);

  return (
    <div id="pad" className="home">
      <div className="top">
        <div className="top-item">
          <div className="top-item-right">
            <span>录像管理</span>
          </div>
          <div className="top-item-left">
            <YoutubeOutlined style={{ color: "#fff", fontSize: "16px" }} />
          </div>
        </div>
      </div>
      <div className="bodyVD">
        <Card
          style={{ width: 260,padding:"4px",margin:"0 50px 0 10px"}}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <DeleteOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<YoutubeOutlined style={{ color: "#fff", fontSize: "26px",background:"#fba629" }} />}
            title="录像1"
            description="录像描述xxx"
          />
        </Card>
        <Card
          style={{ width: 260,padding:"4px",margin:"0 50px 0 10px"}}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <DeleteOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<YoutubeOutlined style={{ color: "#fff", fontSize: "26px",background:"#fba629" }} />}
            title="录像2"
            description="录像描述xxx"
          />
        </Card>
        <Card
          style={{ width: 260,padding:"4px",margin:"0 50px 0 10px"}}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <DeleteOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<YoutubeOutlined style={{ color: "#fff", fontSize: "26px",background:"#fba629" }} />}
            title="录像3"
            description="录像描述xxx"
          />
        </Card>
        <Card
          style={{ width: 260,padding:"4px",margin:"0 50px 0 10px"}}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <DeleteOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<YoutubeOutlined style={{ color: "#fff", fontSize: "26px",background:"#fba629" }} />}
            title="录像4"
            description="录像描述xxx"
          />
        </Card>
        <Card
          style={{ width: 260,padding:"4px",margin:"0 50px 0 10px"}}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <DeleteOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<YoutubeOutlined style={{ color: "#fff", fontSize: "26px",background:"#fba629" }} />}
            title="录像5"
            description="录像描述xxx"
          />
        </Card>
        <Card
          style={{ width: 260,padding:"4px",margin:"0 50px 0 10px"}}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <DeleteOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<YoutubeOutlined style={{ color: "#fff", fontSize: "26px",background:"#fba629" }} />}
            title="录像5"
            description="录像描述xxx"
          />
        </Card>
      </div>
    </div>
  );
};
export default Main;
